import 'package:flutter/material.dart';
import 'package:flutterapp/chapter/nine/stagger_animation.dart';

/// @date 2020/08/11  16:55
/// @author 程志强
/// @des 交织动画

class StaggerAnimationRoute extends StatefulWidget {
  @override
  _StaggerAnimationRouteState createState() => _StaggerAnimationRouteState();
}

class _StaggerAnimationRouteState extends State<StaggerAnimationRoute>
    with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("交织动画"),
      ),
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          _playAnimation();
        },
        child: Center(
          child: Container(
            width: 300.0,
            height: 300.0,
            decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.1),
                border: Border.all(color: Colors.black.withOpacity(0.5))),
            child: StaggerAnimation(
              controller: _controller,
            ),
          ),
        ),
      ),
    );
  }

  Future<Null> _playAnimation() async {
    try {
      // 先正向执行动画
      await _controller
          .forward()
          .orCancel;
      // 再反向执行动画
      await _controller
          .reverse()
          .orCancel;
    } on TickerCanceled {}
  }
}
